<template>
  <div class="msite_content_shop_list">
    <div class="msite_content_shop">
      <div class="msite_content_shop_header"  @click="$router.push('/hairsalon')">
        <flexbox>
          <flexbox-item :span="10">
            <div>
              经典经典 连锁机构连锁机构
            </div>
          </flexbox-item>
          <flexbox-item :span="2">
            <div>
              <img src="../../assets/images/icon_weizhi.png" style="width:8px;height: 12px;"/>
              <span style="color: #a0a0a0;font-size: 14px;">8.6km</span>
            </div>
          </flexbox-item>
        </flexbox>
      </div>
      <div class="msite_content_shop_content">
        <flexbox @click.native="$router.push('/hairsalon')">
          <flexbox-item :span="4.5">
            <img class="msite_content_shop_img" src="../../assets/images/storeimage.png" style=""/>
          </flexbox-item>
          <flexbox-item :span="7">
            <div class="msite_content_shop_title">
              <p style="margin-bottom: -5px;">
                通过发现APP 预约即送什么东西预约即送什么东西
              </p>
            </div>
            <div class="msite_content_shop_condition">
              <x-button mini plain type="primary" style="margin-top: 5px;">环境不错</x-button>
              <x-button mini plain type="primary" style="margin-top: 5px;">发型师经验丰富</x-button>
              <x-button mini plain type="primary" style="margin-top: 5px;">服务态度很好</x-button>
            </div>
            <div class="msite_content_shop_item">
              <div class="msite_content_shop_item_1">
                <span class="font-size-14">洗剪吹￥</span> <span class="font-size-16">100</span>
              </div>
              <div class="msite_content_shop_item_2">
                <span class="font-size-14">烫染￥</span> <span class="font-size-16">198</span>
              </div>

            </div>
          </flexbox-item>
        </flexbox>
        <p class="line"/>

        <div>
          <flexbox>
            <flexbox-item :span="2">
              <div class="msite_content_shop_jiage1">
                ￥35
              </div>
              <div class="msite_content_shop_jiage2">
                ￥55
              </div>
            </flexbox-item>
            <flexbox-item :span="10">
              <div class="msite_content_shop_xianmu">
                <p style="">
                  洗剪吹1次，男女不限，发长不限洗吹1次男女不限，发长不限
                </p>
              </div>
            </flexbox-item>
          </flexbox>
          <p class="line"/>

          <flexbox>
            <flexbox-item :span="2">
              <div class="msite_content_shop_jiage1">
                ￥2988
              </div>
              <div class="msite_content_shop_jiage2">
                ￥5000
              </div>
            </flexbox-item>
            <flexbox-item :span="10">
              <div class="msite_content_shop_xianmu">
                <p>
                  美发套餐，男女不限，发长不限
                </p>
              </div>
            </flexbox-item>
          </flexbox>
          <p class="line"/>
        </div>

        <div v-show="showMore1">
          <flexbox>
            <flexbox-item :span="2">
              <div class="msite_content_shop_jiage1">
                ￥35
              </div>
              <div class="msite_content_shop_jiage2">
                ￥55
              </div>
            </flexbox-item>
            <flexbox-item :span="10">
              <div class="msite_content_shop_xianmu">
                <p style="">
                  洗剪吹1次，男女不限，发长不限洗吹1次男女不限，发长不限
                </p>
              </div>
            </flexbox-item>
          </flexbox>
          <p class="line"/>

          <flexbox>
            <flexbox-item :span="2">
              <div class="msite_content_shop_jiage1">
                ￥2988
              </div>
              <div class="msite_content_shop_jiage2">
                ￥5000
              </div>
            </flexbox-item>
            <flexbox-item :span="10">
              <div class="msite_content_shop_xianmu">
                <p>
                  美发套餐，男女不限，发长不限
                </p>
              </div>
            </flexbox-item>
          </flexbox>
          <p class="line"/>
        </div>

        <flexbox>
          <flexbox-item @click.native="handShowMore('showMore1')">
            <div class="msite_content_shop_item_more">
              <span>{{showMore1? '收起':'查看该店其他2个优惠'}}</span>
              <img src="../../assets/images/icon_xiala.png" style=""/>
            </div>
          </flexbox-item>
        </flexbox>
      </div>
    </div>
    <div class="msite_content_shop">
      <div class="msite_content_shop_header"  @click="$router.push('/hairsalon')">
        <flexbox>
          <flexbox-item :span="10">
            <div>
              经典经典 连锁机构连锁机构
            </div>
          </flexbox-item>
          <flexbox-item :span="2">
            <div>
              <img src="../../assets/images/icon_weizhi.png" style="width:8px;height: 12px;"/>
              <span style="color: #a0a0a0;font-size: 14px;">8.6km</span>
            </div>
          </flexbox-item>
        </flexbox>
      </div>
      <div class="msite_content_shop_content">
        <flexbox @click.native="$router.push('/hairsalon')">
          <flexbox-item :span="4.5">
            <img class="msite_content_shop_img" src="../../assets/images/storeimage.png" style=""/>
          </flexbox-item>
          <flexbox-item :span="7">
            <div class="msite_content_shop_title">
              <p style="margin-bottom: -5px;">
                通过发现APP 预约即送什么东西预约即送什么东西
              </p>
            </div>
            <div class="msite_content_shop_condition">
              <x-button mini plain type="primary" style="margin-top: 5px;">环境不错</x-button>
              <x-button mini plain type="primary" style="margin-top: 5px;">发型师经验丰富</x-button>
              <x-button mini plain type="primary" style="margin-top: 5px;">服务态度很好</x-button>
            </div>
            <div class="msite_content_shop_item">
              <div class="msite_content_shop_item_1">
                <span class="font-size-14">洗剪吹￥</span> <span class="font-size-16">100</span>
              </div>
              <div class="msite_content_shop_item_2">
                <span class="font-size-14">烫染￥</span> <span class="font-size-16">198</span>
              </div>

            </div>
          </flexbox-item>
        </flexbox>
        <p class="line"/>
        <div>
          <flexbox>
            <flexbox-item :span="2">
              <div class="msite_content_shop_jiage1">
                ￥35
              </div>
              <div class="msite_content_shop_jiage2">
                ￥55
              </div>
            </flexbox-item>
            <flexbox-item :span="10">
              <div class="msite_content_shop_xianmu">
                <p style="">
                  洗剪吹1次，男女不限，发长不限洗吹1次男女不限，发长不限
                </p>
              </div>
            </flexbox-item>
          </flexbox>
          <p class="line"/>

          <flexbox>
            <flexbox-item :span="2">
              <div class="msite_content_shop_jiage1">
                ￥2988
              </div>
              <div class="msite_content_shop_jiage2">
                ￥5000
              </div>
            </flexbox-item>
            <flexbox-item :span="10">
              <div class="msite_content_shop_xianmu">
                <p>
                  美发套餐，男女不限，发长不限
                </p>
              </div>
            </flexbox-item>
          </flexbox>
          <p class="line"/>
        </div>
        <div v-show="showMore1">
          <flexbox>
            <flexbox-item :span="2">
              <div class="msite_content_shop_jiage1">
                ￥35
              </div>
              <div class="msite_content_shop_jiage2">
                ￥55
              </div>
            </flexbox-item>
            <flexbox-item :span="10">
              <div class="msite_content_shop_xianmu">
                <p style="">
                  洗剪吹1次，男女不限，发长不限洗吹1次男女不限，发长不限
                </p>
              </div>
            </flexbox-item>
          </flexbox>
          <p class="line"/>

          <flexbox>
            <flexbox-item :span="2">
              <div class="msite_content_shop_jiage1">
                ￥2988
              </div>
              <div class="msite_content_shop_jiage2">
                ￥5000
              </div>
            </flexbox-item>
            <flexbox-item :span="10">
              <div class="msite_content_shop_xianmu">
                <p>
                  美发套餐，男女不限，发长不限
                </p>
              </div>
            </flexbox-item>
          </flexbox>
          <p class="line"/>
        </div>
        <flexbox>
          <flexbox-item @click.native="handShowMore('showMore1')">
            <div class="msite_content_shop_item_more">
              <span>{{showMore1? '收起':'查看该店其他2个优惠'}}</span>
              <img src="../../assets/images/icon_xiala.png" style=""/>
            </div>
          </flexbox-item>
        </flexbox>
      </div>
    </div>
    <divider>我是有底线的</divider>
  </div>
</template>

<script>
  import {Flexbox, FlexboxItem, XButton, Divider} from 'vux'

  export default {
    name: "ShopList",
    components: {
      Flexbox, FlexboxItem, XButton, Divider
    },
    data() {
      return {
        showMore1: false,
        showMore2: false
      }
    },
    methods: {
      handShowMore(type) {
        this[type] = !this[type];
      }
    }
  }
</script>

<style scoped>
  .msite_content_shop_list {

  }

  .msite_content_shop {
    margin: 10px;
    background: #fff;
    border-radius: 3px;
    border: 1px solid #ffdccd;
  }

  .msite_content_shop_header {
    margin: 15px;
    color: #000;
    font-size: 16px;
  }

  .msite_content_shop_img {
    width: 120px;
    height: 115px;
    margin: 0 10px 10px 15px;
  }

  .msite_content_shop_title {
    margin: 0 15px 0 0;
    color: #a0a0a0;
    font-size: 15px;
  }

  .msite_content_shop_condition {
    margin: 10px 15px 0 0;
  }

  .msite_content_shop_item {
    margin: 10px 15px 10px 0;
    color: #ff0000;
  }

  .msite_content_shop_item_1 {
    float: left;
    margin: 5px 0 10px 0;
  }

  .msite_content_shop_item_2 {
    float: right;
    margin: 5px 15px 10px 0;
  }

  .font-size-14 {
    font-size: 14px;
  }

  .font-size-16 {
    font-size: 16px;
  }

  .msite_content_shop_jiage1 {
    margin: 10px 10px 10px 15px;
    color: #ff0000;
    text-align: right;
    font-size: 17px;
  }

  .msite_content_shop_jiage2 {
    margin: -5px 10px 10px 15px;
    text-align: right;
    text-decoration: line-through;
    font-size: 12px;
    color: #a0a0a0;
  }

  .msite_content_shop_xianmu {
    margin: 10px 15px 10px 0;
    color: #333;
    font-size: 15px;
  }

  .msite_content_shop_item_more {
    height: 40px;
    line-height: 40px;
    color: #ff6633;
    text-align: center;
    font-size: 12px;
  }

  .msite_content_shop_item_more img {
    width: 12px;
    height: 6px;
    margin-left: 2px;
  }
</style>
